<template>
  <div class="box-tab-content">
      <div class="active"><span v-for="item in cardList" :key="item.activeType" @click="handleChangeCard(item)" :class="[isActiveType === item.activeType ? 'selected' : '' ]">{{item.name}}</span></div>
      <div class="active_wrap" v-if="isActiveType === 1">
        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>收款汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalGunAmount || 0}}</span><span>加油金额</span></div>
            <!-- <el-popover
              class="pop"
              style="width: 100%"
              placement="top"
              trigger="hover">
              <div class="pop-container">
                <div class="pop-des">商家承担直降金额：{{czbGasDutyRecor.amountActivityMerchant || 0}}</div>
                <div class="pop-des">商家承担平台优惠券金额：{{czbGasDutyRecor.amountPlatformCouponMerchant || 0}}</div>
                <div class="pop-des">商家优惠券金额：{{czbGasDutyRecor.merchantCouponAmount || 0}}</div>
                <div class="pop-des">平台让利金额：{{czbGasDutyRecor.platformProfitAmount || 0}}</div>
              </div>
              <div class="word g-flx-center"  slot="reference">
                <span>{{czbGasDutyRecor.preferentialAmount || 0}}</span><span>优惠金额汇总</span>
              </div>
            </el-popover> -->
            <div class="word g-flx-center" v-if="isShowReal"><span>{{czbGasDutyRecord.totalRealPayAmount || 0}}</span><span>实付金额汇总</span></div>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.orderCount || 0}}</span><span>加油笔数</span></div>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalLitre || 0}}</span><span>加油升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>退款汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalRefundAmount || 0}}</span><span>退款金额</span></div>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.refundCount || 0}}</span><span>退款笔数</span></div>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalRefundLitre || 0}}</span><span>退款升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card" v-if="isShowSum">
          <div slot="header" class="clearfix"><span>结算汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalSettlement || 0}}</span><span>应结算金额</span></div>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalChannelFee || 0}}</span><span>通道费金额</span></div>
            <el-popover
              class="pop"
              style="width: 100%"
              placement="top"
              trigger="hover">
              <div class="pop-container">
                <div class="pop-des">商家承担直降金额：{{czbGasDutyRecord.amountActivityMerchant || 0}}</div>
                <div class="pop-des">商家承担平台优惠券金额：{{czbGasDutyRecord.amountPlatformCouponMerchant || 0}}</div>
                <div class="pop-des">商家优惠券金额：{{czbGasDutyRecord.merchantCouponAmount || 0}}</div>
                <div class="pop-des">平台让利：{{czbGasDutyRecord.platformProfitAmount || 0}}</div>
              </div>
              <div class="word g-flx-center" slot="reference">
                <span>{{czbGasDutyRecord.preferentialMerchantsAmount || 0}}</span><span>商家优惠金额</span>
              </div>
            </el-popover>
            <div class="word g-flx-center"><span>{{czbGasDutyRecord.totalRealSettlement || 0}}</span><span>实际结算金额</span></div>
          </div>
        </el-card>
      </div>
      <div class="active_wrap" v-if="isActiveType === 2">
         <el-card class="box-card">
          <div slot="header" class="clearfix"><span>团油收单收款汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalGunAmount || 0}}</span><span>加油金额</span></div>
            <!-- <el-popover
              class="pop"
              style="width: 100%"
              placement="top"
              trigger="hover">
              <div class="pop-container">
                <div class="pop-des">商家承担直降金额：{{appCzbGasDuty.amountActivityMerchant || 0}}</div>
                <div class="pop-des">商家承担平台优惠券金额：{{appCzbGasDuty.amountPlatformCouponMerchant || 0}}</div>
                <div class="pop-des">商家优惠券金额：{{appCzbGasDuty.merchantCouponAmount || 0}}</div>
                <div class="pop-des">平台让利金额：{{appCzbGasDuty.platformProfitAmount || 0}}</div>
              </div>
              <div class="word g-flx-center"  slot="reference">
                <span>{{appCzbGasDuty.preferentialAmount || 0}}</span><span>优惠金额汇总</span>
              </div>
            </el-popover> -->
            <div class="word g-flx-center" v-if="isShowReal"><span>{{appCzbGasDuty.totalRealPayAmount || 0}}</span><span>实付金额汇总</span></div>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.orderCount || 0}}</span><span>加油笔数</span></div>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalLitre || 0}}</span><span>加油升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>退款汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalRefundAmount || 0}}</span><span>退款金额</span></div>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.refundCount || 0}}</span><span>退款笔数</span></div>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalRefundLitre || 0}}</span><span>退款升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card" v-if="isShowSum">
          <div slot="header" class="clearfix"><span>结算汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalSettlement || 0}}</span><span>应结算金额</span></div>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalChannelFee || 0}}</span><span>通道费金额</span></div>
            <el-popover
              class="pop"
              style="width: 100%"
              placement="top"
              trigger="hover">
              <div class="pop-container">
                <div class="pop-des">商家承担直降金额：{{appCzbGasDuty.amountActivityMerchant || 0}}</div>
                <div class="pop-des">商家承担平台优惠券金额：{{appCzbGasDuty.amountPlatformCouponMerchant || 0}}</div>
                <div class="pop-des">商家优惠券金额：{{appCzbGasDuty.merchantCouponAmount || 0}}</div>
                <div class="pop-des">平台让利：{{appCzbGasDuty.platformProfitAmount || 0}}</div>
              </div>
              <div class="word g-flx-center" slot="reference">
                <span>{{appCzbGasDuty.preferentialMerchantsAmount || 0}}</span><span>商家优惠金额</span>
              </div>
            </el-popover>
            <div class="word g-flx-center"><span>{{appCzbGasDuty.totalRealSettlement || 0}}</span><span>实际结算金额</span></div>
          </div>
        </el-card>
      </div>
      <div class="active_wrap" v-if="isActiveType === 3">
         <el-card class="box-card">
          <div slot="header" class="clearfix"><span>POS收单汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalGunAmount || 0}}</span><span>加油金额</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.orderCount || 0}}</span><span>加油笔数</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalLitre || 0}}</span><span>加油升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>退款汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalRefundAmount || 0}}</span><span>退款金额</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.refundCount || 0}}</span><span>退款笔数</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalRefundLitre || 0}}</span><span>退款升数</span></div>
          </div>
        </el-card>
        <el-card class="box-card" v-if="isShowSum">
          <div slot="header" class="clearfix"><span>结算汇总</span></div>
          <div class="active_count">
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalSettlement || 0}}</span><span>应结算金额</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalChannelFee || 0}}</span><span>通道费金额</span></div>
            <div class="word g-flx-center"><span>{{posCzbGasDuty.totalRealSettlement || 0}}</span><span>实际结算金额</span></div>
          </div>
        </el-card>
      </div>
    </div>
</template>
<script>
export default {
  props: {
    czbGasDutyRecord: {
      type: Object
    },
    appCzbGasDuty: {
      type: Object
    },
    posCzbGasDuty: {
      type: Object
    },
    isShowSum: {
      type: Boolean
    },
    isShowReal: {
      type: Boolean
    }
  },
  data () {
    return {
      isActiveType: 1, // 全部汇总-1 团油收单汇总-2 POS收单汇总-5
      cardList: [
        { name: '全部汇总', activeType: 1, interestCode: 'all' },
        { name: '团油收单汇总', activeType: 2, interestCode: 'tuan' },
        { name: 'POS收单汇总', activeType: 3, interestCode: 'pos' }
      ],
    }
  },
  methods: {
    // 切换活动类型卡片
    handleChangeCard ({ activeType }) {
      this.isActiveType = activeType
    },
  }
}
</script>
<style scoped lang="less">
  .box-tab-content{
    position: relative;
    overflow: hidden;
    .active{
      position: absolute;
      top: 1px;
      z-index: 10;
      >span{
        display: inline-block;
        width: 130px;
        height: 40px;
        font-size:16px;
        font-family: PingFangSC-Bold, PingFang SC;
        margin-right: 5px;
        border:1px solid #DCDFE6;
        border-radius: 15px 15px 0 0;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .selected{
        background: #fff;
        color: #000;
        border-bottom: none;
      }
    }
    .active_wrap{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 30px 10px;
      margin-top: 40px;
      white-space: nowrap;
      overflow-x: auto;
      border:1px solid #DCDFE6;
      background: #fff;
      .box-card{
        height: 150px;
        width: 30%;
        min-width: 375px;
        margin: 0 20px;
        .active_count{
          display: flex;
          justify-content: space-around;
          align-items: center;
          .pop{
            cursor: pointer;
            .pop-des{
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #383838;
              line-height: 25px;
            }
          }
          .word{
            >span:nth-child(1){
              color: #4B7FFC;
              font-size: 18px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            >span:nth-child(2){
              color: #909399;
              font-size: 14px;
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
</style>